<!-- MineEcoloaicalRestStatistic -->
<template>
    <Layout>
        <Form ref="queryForm" :model="dataToQuery" :label-width="120">
            <Row v-show="!switchFlag" class="query-form" >
                <Col span="8">
                    <FormItem label="企业名称：" prop="order">
                        <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName' :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                    </FormItem>
                </Col>
                <!--<Col span="8">-->
                    <!--<FormItem label="填表时间：" prop="content" >-->
                        <!--<DatePicker class="query-form-el" v-model="dataToQuery.dateRange" format="yyyy-MM-dd" type="daterange" placement="bottom-end" placeholder="请选择查询时间段"-->
                                    <!--@on-change="onSelectQueryDateRange"	></DatePicker>-->
                    <!--</FormItem>-->
                <!--</Col>-->
                <Col span="8">
                    <!--<Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>-->
                    <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                    <Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8">
                    <FormItem label="安全生产许可证编号：" prop="saLicenceNum">
                        <Input v-model='dataToQuery.saLicenceNum' class="query-form-el"></Input>
                    </FormItem>
                </Col>
                <Col span="8"></Col>
                <Col span="8" offset="8">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
                    <!--<Button type="primary" class="ivu-btn-add"   icon="md-cloud-download"  @click="exportFormSubmit">导出</Button>-->
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading'
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>
        <Modal  title="矿山生态修复情况台账" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow"  :width=900 :styles="{height:'1139px'}"  class-name='limit-height-dialog'>
            <Row>
                <Col span="24">
                    <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'rpt-form'" :show-message="false" :model="dataToView" :rules="mode === 'view'?{}:ruleCustom" :label-width="mode === 'view'?160:null" :label-position="mode === 'view'?'right':'top'">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='名称：' prop='mineName'>
                                    <div v-if="mode === 'view'">{{dataToView.mineName}}</div>
                                    <Input v-else class='query-form-el' type='text' v-model='dataToView.mineName'></Input>
                                    <!--<cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName" :orgTree="true" :currentOrgId = "dataToView.companyId" :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}" ></cascader-dom>-->
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='所在地：' prop='location'>
                                    <div v-if="mode === 'view'">{{dataToView.location}}</div>
                                    <Input v-else class='query-form-el' type='text' v-model='dataToView.location'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='矿区面积（平方公里）：' prop='mineArea'>
                                    <div v-if="mode === 'view'">{{dataToView.mineArea}}</div>
                                    <InputNumber v-else class="query-form-el" v-model='dataToView.mineArea' :min="0"></InputNumber>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='采矿许可证编号：' prop='mineLicense'>
                                    <div v-if="mode === 'view'">{{dataToView.mineLicense}}</div>
                                    <Input v-else class='query-form-el' type='text' v-model='dataToView.mineLicense'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='生产状态：' prop='productionStatus'>
                                    <div v-if="mode === 'view'">{{dataToView.productionStatus}}</div>
                                    <Input v-else class='query-form-el' type='text' v-model='dataToView.productionStatus'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='所属权/管理权单位：' prop='companyId'>
                                    <div v-if="mode === 'view'">{{dataToView.companyName}}</div>
                                    <cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName" :orgTree="true" :currentOrgId = "dataToView.companyId" :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}" ></cascader-dom>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='生态恢复治理进展：' prop='ecologicalRecoveryProgress'>
                                    <div v-if="mode === 'view'">{{dataToView.ecologicalRecoveryProgress}}</div>
                                    <Input v-else class='query-form-el' type='textarea' v-model='dataToView.ecologicalRecoveryProgress'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='是否闭矿：' prop='ifClosedMine'>
                                    <div v-if="mode === 'view'">{{dataToView.ifClosedMine}}</div>
                                    <Input v-else class='query-form-el' type='text' v-model='dataToView.ifClosedMine'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='已治理面积（公顷）：' prop='treatedArea'>
                                    <div v-if="mode === 'view'">{{dataToView.treatedArea}}</div>
                                    <InputNumber v-else class="query-form-el" v-model='dataToView.treatedArea' :min="0"></InputNumber>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='计划治理面积（公顷）：' prop='plannerArea'>
                                    <div v-if="mode === 'view'">{{dataToView.plannerArea}}</div>
                                    <InputNumber v-else class='query-form-el' v-model='dataToView.plannerArea' :min="0"></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='计划费用（万元）：' prop='plannedExpenses'>
                                    <div v-if="mode === 'view'">{{dataToView.plannedExpenses}}</div>
                                    <InputNumber v-else class='query-form-el' v-model='dataToView.plannedExpenses' :min="0"></InputNumber>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='计划完成时间：' prop='plannedCompletionTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.plannedCompletionTime)}}</div>
                                    <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期" style="width: 100%" v-model='dataToView.plannedCompletionTime'></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='安全风险：' prop='securityRisk'>
                                    <div v-if="mode === 'view'">{{dataToView.securityRisk}}</div>
                                    <Input v-else class='query-form-el' v-model='dataToView.securityRisk'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='环保风险：' prop='envRisk'>
                                    <div v-if="mode === 'view'">{{dataToView.envRisk}}</div>
                                    <Input v-else class='query-form-el' v-model='dataToView.envRisk'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='属地政府要求：' prop='governRequire'>
                                    <div v-if="mode === 'view'">{{dataToView.governRequire}}</div>
                                    <Input v-else class='query-form-el' v-model='dataToView.governRequire'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='备注：' prop='notes'>
                                    <div v-if="mode === 'view'">{{dataToView.notes}}</div>
                                    <Input v-else class='query-form-el' type='textarea' v-model='dataToView.notes'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='填表人：' prop='registrant'>
                                    <div v-if="mode === 'view'">{{dataToView.createUserName}}</div>
                                    <Input v-else type='text' v-model='dataToView.createUserName' readonly></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='填表人手机号：' prop='registrantPhone'>
                                    <div v-if="mode === 'view'">{{dataToView.registrantPhone}}</div>
                                    <Input v-else type='text' v-model='dataToView.registrantPhone'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='填表时间：' prop='registTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.createDate)}}</div>
                                    <DatePicker v-else type="date" placeholder="请选择日期" class="query-form-el" v-model='dataToView.createDate' readonly></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="11">
                            </Col>
                        </Row>
                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    import {formatDate} from '@/tools/index'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    export default {
        components:{
            cascaderDom
        },
        data(){
            return{
                ...this.createCommonDataField(),
                columns1: [
                    { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    { key:'mineName',title: '名称',  align: 'center', width: 200 },
                    { key:'location',title: '所在地',  align: 'center', width: 200 },
                    { key:'mineArea',title: '矿区面积（平方公里）',  align: 'center', width: 130 },
                    { key:'mineLicense',title: '采矿许可证',  align: 'center', width: 150  },
                    { key:'productionStatus',title: '生产状态',  align: 'center', width: 200 },
                    { key:'companyName',title: '所属权/管理权单位',  align: 'center', width: 200 },
                    { key:'ifClosedMine',title: '是否闭矿',  align: 'center', width: 200 },
                    { key:'ecologicalRecoveryProgress',title: '生态恢复治理进展',  align: 'center', width: 150, tooltip:true },
                    { key:'treatedArea',title: '已治理面积（公顷）',  align: 'center', width: 200 },
                    { key:'plannerArea',title: '计划治理面积（公顷）',  align: 'center', width: 200 },
                    { key:'plannedExpenses',title: '计划费用（万元）',  align: 'center', width: 200 },
                    { key:'plannedCompletionTime',title: '计划完成时间',  align: 'center', width: 200 ,render:this.renderCellDate},
                    { key:'securityRisk',title: '安全风险',  align: 'center', width: 200 },
                    { key:'envRisk',title: '环保风险',  align: 'center', width: 200 },
                    { key:'governRequire',title: '属地政府要求',  align: 'center', width: 200 },
                    { key:'notes',title: '备注',  align: 'center', width: 150, tooltip:true },
                    this.getActionColumns(),
                ],
                ruleCustom : {
                    // perfAssessNum: [ { required: true, message: '请填写绩效考核责任书编号', trigger: 'change' } ],
                    mineName: [ { required: true, message: '请填写矿山名称', trigger: 'change' } ],
                    companyId: [ { required: true, message: '请填写企业名称', trigger: 'change' } ],
                },
                tableHeight:10,
                // api
                queryUrl:Api.queryMineEcoloaical,
                exportUrl:Api.exportMineEcoloaical,
                deleteUrl:Api.deleteMineEcoloaical,
                updateUrl:Api.updateMineEcoloaical,
                saveUrl:Api.saveMineEcoloaical,
                //coding
                mineBlastList : [],
                mineTeamTypeList: [],
            }
        },
        async mounted() {
            this.setTableHeight();
            this.query();
        },
        methods:{
            ...pageCommonFunction,
            createEmptyDataToAdd() {
                return {
                    mineArea: 0,
                    treatedArea: 0,
                    plannerArea:0,
                    plannedExpenses: 0,
                    createUserName:this.currentUser.userName,
                    createDate:new Date()
                }
            },
            beforeEditDialogOpen(data) {
                // data.row.companyAddressArr = data.row.companyAddress.split(',')
            },
            deleteData(params) {
                this.deleteDateAjax(params);
            },
            query() {
                this.queryAjax();
            },
            submit(name) {
                this.submitAjax(name);
            },

        },
        watch:{
        },
    }
</script>

<style lang='css' scoped>
    .rpt-form{}
    /deep/ .rpt-form .query-form-el{width:100%;}
    /deep/ .rpt-form .ivu-table-wrapper{overflow: visible;}
    /deep/ .rpt-form .ivu-table-wrapper .ivu-table{overflow: visible;}
</style>
